<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>无标题文档</title>

<style>
html,body,div,p,form,label,ul,li,dl,dt,dd,ol,img,button,b,em,strong,small,h1,h2,h3,h4,h5,h6{margin:0;padding:0;border:0;list-style:none;font-style:normal;}
body{font-family:SimHei,'Helvetica Neue',Arial,'Droid Sans',sans-serif;font-size:14px;color:#333;background:#F1F2F4;padding: 0;min-width: 300px; max-width: 640px; margin: 0 auto;}
a, a.link{color:#666;text-decoration:none;font-weight:500;}
a, a.link:hover{color:#666;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
.left-menu::-webkit-scrollbar {width: 0px;}
.main{overflow:hidden;}
.left-menu{width:25%;float:left;background-color:#eee;position:relative;overflow-y:scroll;height: 500px;}
.left-menu ul li{line-height:60px;width:100%;text-align:center;font-size:14px;padding:3px 0;color:#333;border-bottom:1px solid #ddd;}  
.left-menu ul li.active{color:#f34b3f !important;background-color:#fff;}  
.right-con{display:none;width:75%;float:left;overflow-y:scroll;background:#fff;position:relative;height:500px;}
.con .con-active{display:block;}
.right-con li{position:relative;height:75px;border-bottom:1px solid #e7eaeb;border-top:1px solid #fff;padding-bottom:8px;margin-bottom:2px;}  
.right-con li .menu-img{position:absolute;margin-left:10px;top:15px;border-radius:3px;cursor:pointer;}  
.right-con li .menu-img img{height:55px;width:55px;vertical-align:middle;border:0;}  
.right-con li .menu-txt{margin:15px 15px 15px 75px;}
.right-con li .menu-txt h3{font-size:14px;margin-bottom:10px;margin-top:8px;} 
.right-con li .menu-txt p{font-style:normal;line-height:20px;font-size:12px;vertical-align:bottom;}  
.right-con li .menu-txt p.list2 b{font-size:14px;color:#f00;}  
.right-con li .btn{background-color:transparent;position:absolute;right:0px;top:45%;cursor:pointer;padding:3px;height:38px;}  
.right-con li .btn button.minus{margin-right:-10px;display:none;}  
.right-con li .btn button,#car button{width:40px;height:40px;border:0;background:transparent;padding:0;}  
.right-con li .btn button strong,#car strong{padding:5px 10px;font-size:15px;display:inline-block;text-indent:-100px;padding:5px 11px;height:12px;}  
.right-con li .btn button.minus strong{background:url(img/down.png) no-repeat;background-size:22px 22px;}  
.right-con li .btn i{display:none;width:22px;text-align:center;font-style:normal;vertical-align:top;margin-top:11px;line-height:18px;}
.right-con li .btn button.add,#car .add{margin-left:-10px;}  
.right-con li .btn button.add strong,#car strong{background:url(img/up.png) no-repeat;background-size:22px 22px;}  
.right-con li .btn .price{display:none;} 
.footer{display:block;position:fixed;width:100%;z-index:3;bottom:0px;color:#FFFFFF;background:#404040;line-height:35px;font-size:15px;border-top:1px solid #e2e2e2;}  
.footer .left{float:left;margin:5px 10px;}  
.footer .right{float:right;}  
.footer .right .disable{background:#dbdbdb;color:#FFFFFF;}  
.footer .xhlbtn{display:block;text-align:center;line-height:55px;background-color:#FFD161;padding:0 15px;color:#fff;font-weight:bold;color: #6A5128}

.p{
	margin-left: 100px;
}  
.down{
	float: right;
	vertical-align: bottom;
	margin-right: 20px;
}
.header{
	width: 100%;
	height: 46px;
}
.header h1{
	text-align: center;
	line-height: 46px
}
.main{
	margin-bottom: 45px;
}
</style>
</head>

<body>
<div class="main">
	<div class="header">
		<h1>标题</h1>
	</div>
	<div class="left-menu">
		<ul>  
           <li class="active">营养套餐<span class="num-price"></span></li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li> 
		   <li>酒水饮料</li>  
           <li>酒水饮料</li>  
           <li>酒水饮料</li> 
		   <li>酒水饮料</li>  
            
        </ul> 
	</div>
	<div class="con">
		<div class="right-con con-active" style="">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="1">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
								 <!-- 【宫保鸡丁】标准数据，其他li是用来撑长度的 -->
								 <!-- data-id里面放入产品唯一id -->
								 <!-- JS里面也有data-id，也要替换 -->
								 <!-- data-id作用是实现了购物车功能 -->
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="2">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="3">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="4">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="5">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="6">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="7">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="8">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">宫保鸡丁</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥26</b>
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add" data-id="9">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
								 <i class="price">26</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="right-con" style="display: none;">
			<ul>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
				<li>
					<div class="menu-img"><img src="./demo_files/pic.png" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 class="name">京酱肉丝</h4>
						<p class="list1">家常菜</p>
						<p class="list2">
							<b>￥25</b>
							</p><div class="btn">  
								 
								 <i>0</i>  
								  <button class="add">  
									 <strong></strong>  
								 </button>  
								 <i class="price">25</i>  
							 </div> 
						<p></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="footer">  

		<div id="car"  style="background-color: #fff;display: none;color: black">
		<!-- <div >
			<span>宮保雞丁</span><span class="p">￥25</span><span class="p2">￥26</span>  <i><img class="down" src="img/down.png"></i>
		</div> 
		<div >
			<span>宮保雞丁</span><span class="p">￥25</span><span class="p2">￥26</span> <i><img class="down" src="img/down.png"></i>
		</div> --> 
		</div> 
		<div class="left" style="font-size: 12px">
			<img id="carico" src="img/carno.png">
		<span id="cartN">
			<span id="totalcountshow">0</span>份门市价：￥<span id="totalpriceshow">0</span></span>元合作价：￥<span id="totalpriceshow2">0</span>元  
		</div>  
		<div class="right">  
			<a id="btnselect" class="xhlbtn  disable" href="javascript:void(0)">去结算</a>  
		</div>   
	</div>
</div>
<input id="result" type="hidden" name="">
<input id="totalpriceshow3" type="hidden" name="">
<input id="totalpriceshow4" type="hidden" name="">
<!-- 上面为结果隐藏域 -->
<script type="text/javascript" src="./demo_files/jquery.min.js"></script>
<script type="text/javascript">
$(function () {  
	var f = true;
	//加的效果  
	$(".add").click(function () { 
		var id =$(this).attr('data-id') ;
  	
		var t = $(this).hasClass('has');
		if(!t){
			$(this).find('strong').css("background-image","url(img/down.png)");
			$(this).addClass('has');
			var danjia = $(this).next().text();//获取单价  
			var danjia2 = $(this).next().next().text();//获取单价2  
			var nm = $("#totalcountshow").html();
			$("#totalcountshow").html(parseFloat(nm)+1);

		}else{
			$(this).find('strong').css("background-image","url(img/up.png)");
			$(this).removeClass('has');
			var danjia = 0-parseFloat($(this).next().text());//获取单价
			var danjia2 = 0-parseFloat($(this).next().next().text());//获取单价2    
			var nm = $("#totalcountshow").html();
			$("#totalcountshow").html(parseFloat(nm)-1)
		}


		var n = $(this).prev().text();  
		var num = parseInt(n) + 1;  
		if (num == 0) { return; }  

		var a = $("#totalpriceshow").html();//获取当前所选总价  
		var b = $("#totalpriceshow2").html();
		$("#totalpriceshow").html((a * 1 + danjia * 1));//计算当前所选总价
		$("#totalpriceshow3").val((a * 1 + danjia * 1));//计算当前所选总价
		$("#totalpriceshow2").html((b * 1 + danjia2 * 1));//计算当前所选总价 
		$("#totalpriceshow4").val((b * 1 + danjia2 * 1));//计算当前所选总价 
		
		jss(id);//<span style='font-family: Arial, Helvetica, sans-serif;'></span>   改变按钮样式
		var re = [];
		for(var q =0;q<$('#car').children('[data-id]').length;q++){
			re.push($('#car').children('[data-id]').eq(q).attr('data-id'))
		}
		$("#result").val(re)
		
	});  

	function jss(id) {  
		var m = $("#totalcountshow").html(); 
		if (m > 0) { 
			if(!$("#car").find('[data-id="'+id+'"]').length){
				var name1 = $('.menu-txt').find('[data-id="'+id+'"]').parents('.menu-txt').find('.name').text()
				var p1 = $('.menu-txt').find('[data-id="'+id+'"]').parents('.menu-txt').find('.price:eq(0)').text()
				var p2 = $('.menu-txt').find('[data-id="'+id+'"]').parents('.menu-txt').find('.price:eq(1)').text()
				$("#car").append('<div data-id="'+id+'"><span>'+name1+'</span><span class="p">￥'+p1+'</span><span class="p2">￥'+p2+'</span>  <i><img data-id="'+id+'" class="down cardown" src="img/down.png" ></i></div>') 
			}else{
				$("#car").find($('[data-id="'+id+'"]')).remove()
			}
			$(".right").find("a").removeClass("disable");
			$('#carico').attr('src','img/carhas.png') ;
			if(f){
				 $('#carico').on('click',function(){

	 	 
	 	 if( $('#car').hasClass('isshow')){
	 	 	$('#car').removeClass('isshow');
	 	 	$('#car').hide();
	 	 }else{
	 	 	$('#car').show();
	 	 $('#car').addClass('isshow');
	 	 }
	 }) 
			}
			f=false;
		} else {  
		   $(".right").find("a").addClass("disable");  
		   $('#carico').attr('src','img/carno.png') ;
		   $("#carico").unbind();
		   $("#car").hide();
		   $("#car").empty()
		   f=true;
		}  
	};

	//选项卡
	$(".con>div").hide();
	$(".con>div:eq(0)").show();		
	$(".left-menu li").click(function(){
		$(this).addClass("active").siblings().removeClass("active");
		var n = $(".left-menu li").index(this);
		$(".left-menu li").index(this);
		$(".con>div").hide();
		$(".con>div:eq("+n+")").show();	
	});
});  
	$('#car').delegate('.cardown','click',function(){
		var id = $(this).attr('data-id')
		$('[data-id="'+id+'"]').click()
	})
</script>



</body></html>